@import "../../colors";
@import "../../frameless";

.tab-background {
    box-shadow: 0 0 1px $box-shadow-gray;
    background-color: $ui-white;
    width: 100%;
}

.tabs {
    background-color:  $ui-white;
    padding: 0;
    width: $cols12;
    justify-content: center;
}

.tabs li {
    margin: 0;
    border: 0;
    border-radius: 0;
    width: $cols2;
    text-align: center;
    color: $header-gray;

    &.active {
        border-bottom: 3px solid $ui-aqua;

        &:hover {
            border-bottom: 3px solid $ui-aqua;
            color: $header-gray;
        }
    }

    &:active {
        box-shadow: none;
        padding: .75em 1.5em;
    }

    &:hover {
        border-bottom: 3px solid $active-dark-gray;
    }

    .tab-icon {
        display: block;
        margin: 0 auto;
        margin-bottom: 4px;
        width: 24px;
    }

    &:hover {
        background-color: $ui-white;
        color: $header-gray;
    }
}
